<template>
    <div style="width: 100%; height: 100%">
        <el-auto-resizer>
            <template #default="{ height, width }">
                <el-table-v2
                    :columns="columns"
                    :data="data"
                    :width="width"
                    :height="height"
                    fixed />
            </template>
        </el-auto-resizer>
    </div>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import {
    ElButton,
    ElIcon,
    ElTag,
    ElTooltip,
    TableV2FixedDir,
    ElMessage,
    ElMessageBox,
} from 'element-plus';
import { Timer } from '@element-plus/icons-vue';
import type { Column } from 'element-plus';
interface dataT {
    id: string;
    name: string;
    date: string;
    age: string;
    sex: string;
    tip: string;
}
let id = 0;
const dataGenerator = (): dataT => ({
    id: `random-id-${++id}`,
    name: 'Tom',
    date: '2020-10-1',
    age: '18',
    sex: 'N',
    tip: 'No. 189, Grove St, Los Angeles',
});
const columns: Column<any>[] = [
    {
        key: 'date',
        title: '时间',
        dataKey: 'date',
        width: 160,
        align: 'center',
        fixed: TableV2FixedDir.LEFT,
        cellRenderer: ({ cellData: date }) => (
            <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
                {
                    <span class="flex items-center">
                        <ElIcon class="mr-3">
                            <Timer />
                        </ElIcon>
                        {dayjs(date).format('YYYY/MM/DD')}
                    </span>
                }
            </ElTooltip>
        ),
    },

    {
        key: 'name',
        title: '姓名',
        dataKey: 'name',
        width: 160,
        align: 'center',
        cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
    },
    {
        key: 'sex',
        title: '性别',
        dataKey: 'sex',
        width: 150,
        align: 'center',
        cellRenderer: ({ cellData: sex }) => <ElTag>{sex}</ElTag>,
    },
    {
        key: 'age',
        title: '年龄',
        dataKey: 'age',
        width: 150,
        align: 'center',
        cellRenderer: ({ cellData: age }) => <ElTag>{age}</ElTag>,
    },
    {
        key: 'tip',
        title: '备注',
        dataKey: 'tip',
        width: 300,
        align: 'center',
        cellRenderer: ({ cellData: tip }) => <span>{tip}</span>,
    },

    {
        key: 'operations',
        title: '操作',
        cellRenderer: ({ rowData }) => (
            <>
                <ElButton onClick={delItem.bind(this, rowData)} size="small" type="danger">
                    删除
                </ElButton>
                <ElButton onClick={exitItem.bind(this, rowData)} size="small">
                    编辑
                </ElButton>
            </>
        ),
        width: 150,
        align: 'center',
    },
];
const data = ref(Array.from({ length: 200 }).map(dataGenerator));

// 删除

const delItem = (val: dataT) => {
    ElMessageBox.confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            ElMessage({
                type: 'success',
                message: '操作成功',
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '操作取消',
            });
        });
    console.log(val, 111);
};
// 编辑
const exitItem = (val: dataT) => {
    console.log(val);
    console.log(111);
};
</script>

<style lang="scss" scoped></style>
